<template>
    <div @click.stop.prevent="" id="searchMe">
        <Card class='toInfo_parent' >
            <div class="toinfo_wrap">
                <div class='cardFirst'>
                    <span class="card_head">
                        <div class="images" v-viewer>
                            <img draggable="false" :onerror="defaultImg" viewer='true' style="width:64px;height:64px;" class="img-border"
                            :src="!$isNull(viewTarget.head)?(`${$store.state.headPathUrl}${viewTarget.id}${viewTarget.head}.PNG`):`static/image/home/person_${viewTarget.gender==1?1:2}.png`" />
                        </div>
                    </span>
                    <div class="card_n">
                        <h2>
                            <b>{{viewTarget.name}}</b>
                        </h2>
                    </div>
                    <div class="card_close" @click.stop.prevent="cardClose">
                        <img src="static/image/home/closeWindow.png">
                    </div>
                </div>
                <ul @click.stop.prevent="" class="info_card">
                    <li v-for='(item,index) in personInfoList'  :key="index+'card'">
                        <span class="info_title">{{item.title}}</span>
                        <template v-if="index < 3">
                            <span v-if='index!=2'>{{viewTarget[item.field]||'--'}}</span>
                            <span v-else>{{(viewTarget[item.field])==2?"女":"男"}}</span>
                        </template>
                        <Tooltip v-else class="dxTooltip" :content="viewTarget[item.field]||'--'" placement="top">
                            <span>{{viewTarget[item.field]||'--'}}</span>
                        </Tooltip>
                    </li>
                    <li class="last">
                        <span class="info_title">常用联系</span>
                        <img v-show="ifLinkman" src="static/image/home/box_selected.png" alt="" @click="personItem(0)">
                        <img v-show="!ifLinkman" src="static/image/home/box_selection.png" alt="" @click='addLinkman(viewTarget.id)'>
                    </li>
                </ul>
                <div class="to_c_btn_w" v-if='(viewTarget.id||viewTarget.ID)!=myInfo.id&&(viewTarget.id||viewTarget.ID)!=toInfo.id'>
                    <Button type='info' long style='margin-bottom: 1.5em;' @click.native.stop.prevent='newChat(viewTarget,false)'>发送消息</Button>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
import {mapState} from 'vuex'
	export default {
		props: {
            viewTarget:{
                type:Object,
                default:{}
            },
            toInfo:{
                type:Object,
                default:{}
            },
            ifLinkman:{
                type:Boolean,
                default:false
            }
		},
		data() {
			return {
                // defaultImg:'this.src="' + require('../../../static/image/home/person_1.png') + '"',
				defaultImg:'this.src="static/image/home/person_1.png"',//zk1224修改
			}
        },
        filters: {
            setName(info) {
				let sName = info;
				if (sName.length > 3) sName = sName.slice(0, 3) + "...";
				return sName;
			}
        },
        computed: {
			...mapState(['myInfo','personInfoList',"user_hot_key"])
        },
		mounted() {
		
		},
		methods: {           
            newChat(){
                this.$emit('newChat',this.viewTarget,false);
                this.cardClose()
            },
            personItem(index){
                this.$emit('personItem',index);
            },
            cardClose(){
                this.$emit('cardClose',false)
            },
            addLinkman(i){
                this.$emit('addLinkman',i);
            }            
		},
		watch: {
            ifLinkman(){
                
            }
        },
		created(){
            console.log(this.viewTarget, '1111111111111')
        }
	}
</script>
<style scoped>
#searchMe{
    position: absolute;
    width: calc(100% - 313px);
    height: 100%;
    right: 0; 
}
#searchMe>>>.ivu-card{
    width: 100%;
    height: 100%;
}
#searchMe .to_c_btn_w{
    text-align: left;
}
#searchMe>>>.ivu-btn{
    width: 180px;
}
#searchMe .toInfo_parent .cardFirst{
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 20px;
}
#searchMe .card_close{
    margin-bottom: 90px;
}
#searchMe .last img{
    width: 14px;
    height: 14px;
}
#searchMe .info_title{
    width: 96px;
}
</style>